<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .background {
            background-image: url(../img/biaodan.jpg); /* 设置背景图片的路径 */
            background-size: cover; /* 指定背景图片的尺寸 */
            background-position: center; /* 指定背景图片的位置 */
            background-repeat: no-repeat; /* 禁止背景图片重复 */
            width: 100%; /* 让背景图充满整个屏幕宽度 */
            height: 100vh; /* 让背景图充满整个屏幕高度 */
            position: fixed; /* 固定背景图 */
            z-index: -1; /* 将背景图置于所有其他内容的底层 */
    }
    .q1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 在垂直方向上居中 */
    align-items: center; /* 在水平方向上居中 */
    }
    </style>
</head>
<body>
    <div class="background"></div> <!-- 背景容器 -->
    <div >
        <form class="q1">
            <h1>学校预约入校</h1>
            姓名：<input type="text"><br>
            性别男：<label><input type="radio" name="sex">是</label>
            <label><input type="radio" name="sex">否</label><br>
            手机号：<input type="text"><br>
            身份证号：<input type="password"><br>
            同行人姓名：<input type="text"><br>
            车牌号：<input type="text"><br>
            来访日期：<input type="date"><br>
            来访时间：<input type="datetime"><br>
            来访原因：<label><input type="checkbox">公务</label>
            <label><input type="checkbox">会友</label>
            <label><input type="checkbox">游玩</label>
            <label><input type="checkbox">考试</label>
            <label><input type="checkbox">培训</label><br>
            其他：<textarea></textarea><br>
            <input type="submit" onclick="ok()" value="提交">
            <input type="reset">
            
        </form>
    </div>
</body>
</html>